import { createVNode, getCurrentInstance, render } from 'vue';
import ColorModalConstructor from './colorModal';

export function useColorModal() {
  function getModalInstance(props) {
    const appContext = getCurrentInstance()?.appContext;
    const container = document.createElement('div');
    const vNode = createVNode(ColorModalConstructor, props);
    vNode.appContext = appContext;
    render(vNode, container);
    document.body.append(container);
    props.onVanish = () => {
      render(null, container);
      document.body.removeChild(container);
    };
    return vNode;
  }

  function show(props) {
    getModalInstance(props);
  }

  return {
    show,
  };
}
